<template>
  <div class="chat-container">
    <div class="sidebar">
        <button @click="newConversation">新建会话</button>
        <input class="inputSearch" placeholder="搜索" />
    </div>
    <div class="chat-main">
        <div class="chat-body">
            <div v-for="(msg, index) in messages" :key="index" :class="msg.role">
            <div class="message-bubble">{{ msg.content }}</div>
            </div>
        </div>
        <div class="chat-footer">
            <input class="inputMessage" type="text" v-model="userInput" placeholder="输入你的问题..." @keyup.enter="sendMessage"/>
            <button @click="sendMessage">Send</button>
        </div>
    </div>
  </div>
</template>

<script setup>
import { ref,nextTick } from 'vue';
import axios from 'axios';

let userInput = ref('');
let messages = ref([]);

// 初始化一个新的会话
const newConversation = () => {
  messages.value = [];
};


const sendMessage = async () => {
    const trimmedInput = userInput.value.trim();
    if (!trimmedInput) {
      alert('请输入问题');
      return;
    }
  
    // 使用对象形式添加用户消息
    messages.value.push({
      role: 'user',
      content: trimmedInput
    });
  
    userInput.value = '';
    // 滚动到底部
    scrollToBottom();
  
    try {
      const response = await axios.post('http://127.0.0.1:8000/app/conversation/', {
        user_input: trimmedInput,
        messages: messages.value
      });
  
      if (response.data.code === 200) {
        messages.value.push({
          role: 'assistant',
          content: response.data.message
        });
      } else if (response.data.code === 10010) {
        messages.value.push({
          role: 'assistant',
          content: '对话结束'
        });
      } else {
        messages.value.push({
          role: 'error',
          content: 'Error: ' + response.data.message
        });
      }
    } catch (error) {
      console.error('Error sending message:', error);
      messages.value.push({
        role: 'error',
        content: '无法发送消息，请稍后再试。'
      });
    }
      // 再次滚动到底部
      scrollToBottom();
  };
  const scrollToBottom = () => {
  nextTick(() => {
    const chatBody = document.querySelector('.chat-body');
    if (chatBody) {
      chatBody.scrollTop = chatBody.scrollHeight;
    }
  });
};
</script>

<style scoped>
.chat-container {
  display: flex;
  height: 100vh;
  max-width: 800px;
  margin: 0 auto;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background-color: #f5f5f5;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.sidebar {
  width: 200px;
  padding: 20px;
  border-right: 1px solid #e0e0e0;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
}

.sidebar button {
  padding: 10px 20px;
  background-color: #00bfa5;
  color: #ffffff;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
  margin-bottom: 10px;
}

.sidebar button:hover {
  background-color: #009688;
}

.sidebar input {
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  margin-bottom: 10px;
  background-color: #ffffff;
  color: #333333;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
}

.history-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  border-top: 1px solid #e0e0e0;
  margin-top: 10px;
  background-color: #f5f5f5;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.history-list .message-bubble {
  background-color: #d1e1ff;
  border-radius: 20px;
  padding: 10px 15px;
  margin-bottom: 10px;
  text-align: left;
  clear: both;
  max-width: 80%;
  word-wrap: break-word;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 0 10px 10px 0;
  box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1);
}

.chat-header {
  background-color: #ffffff;
  color: #333333;
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid #e0e0e0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}

.chat-footer {
  display: flex;
  align-items: center;
  padding: 10px;
  border-top: 1px solid #e0e0e0;
  background-color: #f5f5f5;
}

.inputMessage {
  flex: 1;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  margin-right: 10px;
  background-color: #ffffff;
  color: #333333;
  font-size: 14px;
  box-sizing: border-box;
  outline: none;
}
.inputSearch{
  outline: none;
}

.chat-footer button {
  padding: 10px 20px;
  background-color: #00bfa5;
  color: #ffffff;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.chat-footer button:hover {
  background-color: #009688;
}

.user .message-bubble {
  background-color: #e1ffc1;
  border-radius: 20px;
  padding: 10px 15px;
  margin-bottom: 10px;
  text-align: right;
  float: right;
  clear: both;
  max-width: 70%;
  word-wrap: break-word;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.assistant .message-bubble {
  background-color: #d1e1ff;
  border-radius: 20px;
  padding: 10px 15px;
  margin-bottom: 10px;
  text-align: left;
  float: left;
  clear: both;
  max-width: 70%;
  word-wrap: break-word;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.error .message-bubble {
  background-color: #ffe1e1;
  color: #b71c1c;
  border-radius: 20px;
  padding: 10px 15px;
  margin-bottom: 10px;
  text-align: center;
  clear: both;
  max-width: 70%;
  word-wrap: break-word;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>
